<template>
  <div class="home">
    <div style="width: 500px; margin: 0 auto;">
      <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient
            id="playGrad"
            gradientUnits="userSpaceOnUse"
            x1="0"
            y1="300"
            x2="800"
            y2="300"
          >
            <stop offset="0" style="stop-color:#246EB9" />
            <stop offset="0.2" style="stop-color:#EE4266" />
            <stop offset="0.4" style="stop-color:#FFD23F" />
            <stop offset="0.6" style="stop-color:#3BCEAC" />
            <stop offset="0.8" style="stop-color:#FF6F59" />
            <stop offset="1" style="stop-color:#246EB9" />
          </linearGradient>
          <pattern
            id="gradPattern"
            width="800"
            height="600"
            x="0"
            y="0"
            patternUnits="userSpaceOnUse"
          >
            <rect
              id="grad"
              x="0"
              y="0"
              fill="url(#playGrad)"
              width="800"
              height="600"
            />
          </pattern>
          <g id="endGroup">
            <path
              id="H_Start"
              d="M233.38,512.43H217.06a5.56,5.56,0,0,1-5.58-5.58V489.91a5.52,5.52,0,0,0-5.37-5.58H134.84a5.39,5.39,0,0,0-5.37,5.58v16.94a5.55,5.55,0,0,1-5.57,5.58H107.58a5.56,5.56,0,0,1-5.58-5.58V381.05a5.56,5.56,0,0,1,5.58-5.58H123.9a5.55,5.55,0,0,1,5.57,5.58v73.12a5.39,5.39,0,0,0,5.37,5.58h71.27a5.52,5.52,0,0,0,5.37-5.58V381.05a5.56,5.56,0,0,1,5.58-5.58h16.32a5.56,5.56,0,0,1,5.58,5.58v125.8A5.56,5.56,0,0,1,233.38,512.43Z"
            />
            <path
              id="R_Start"
              d="M542,512.43H525.66a5.56,5.56,0,0,1-5.58-5.58V486.61c0-8.68-6.2-15.7-13.63-15.7h-70a5.73,5.73,0,0,0-5.17,5.16v30.78a5.56,5.56,0,0,1-5.58,5.58H409.36a5.56,5.56,0,0,1-5.58-5.58V381.05a5.56,5.56,0,0,1,5.58-5.58h84.48c22.73,0,41.11,18.18,41.11,40.49v14.25a39,39,0,0,1-6.81,22.11,40.54,40.54,0,0,1,19.41,34.29v20.24A5.55,5.55,0,0,1,542,512.43ZM507.48,416c0-8.68-6-15.7-13.64-15.7H431.25v40.49a5.21,5.21,0,0,0,5.37,5.37h57.22c7.65,0,13.64-7,13.64-15.7Z"
            />
            <path
              id="A_Start"
              d="M389.84,506.54q0,5.56-5.53,5.57h-16.2q-5.53,0-5.53-5.57V489.6q0-5.58-5.4-5.58H285.55c-3.6,0-5.39,1.86-5.39,5.58v16.94q0,5.56-5.54,5.57H258.43q-5.53,0-5.54-5.57V442.71q0-29.32,20-49.78t48.33-20.45q28.51,0,48.55,20.45t20,49.78v63.83Zm-27.26-52.68V443.33q0-18.79-12.05-32t-29.27-13.22q-17,0-29.06,13.12a45,45,0,0,0-12,31.5v11.15c0,3.72,1.79,5.58,5.39,5.58h71.63Q362.58,459.44,362.58,453.86Z"
            />
            <path
              id="D_Start"
              d="M702,444.15q0,28.31-19.93,48.34t-48.44,20H565q-5.57,0-5.57-5.58V381.15q0-5.56,5.57-5.57h68.66q28.3,0,48.33,20.14t20,48.33Zm-27.26-.1v-.13A43.58,43.58,0,0,0,662.62,413q-12.12-12.84-29.1-12.84H592c-3.58,0-5.38,1.79-5.38,5.38v76.81c0,3.73,1.8,5.59,5.38,5.59h41.48q17,0,29.1-12.83T674.74,444.05Z"
            />
            <path
              id="P_End"
              d="M202.81,287.09H135.05a5.38,5.38,0,0,0-5.37,5.58v57.89a5.55,5.55,0,0,1-5.58,5.57H107.78a5.54,5.54,0,0,1-5.57-5.57V96a5.55,5.55,0,0,1,5.57-5.58h95c22.72,0,41.11,18.18,41.11,40.49V246.81C243.92,269.12,225.53,287.09,202.81,287.09ZM216.65,131c0-8.67-6.2-15.7-13.84-15.7H135.05a5.33,5.33,0,0,0-5.37,5.37V256.31a5.38,5.38,0,0,0,5.37,5.58h67.76c7.64,0,13.84-7,13.84-15.7Z"
              fill="#39b54a"
            />

            <path
              id="L_End"
              d="M387.47,337.13a67.26,67.26,0,0,1-49.37,21.69c-37.8,0-68.37-31.81-68.37-71.06V120.62a5.52,5.52,0,0,0-5.58-5.37h-6.61a5.55,5.55,0,0,1-5.58-5.57V96a5.56,5.56,0,0,1,5.58-5.58h51.23A5.38,5.38,0,0,1,314.14,96v13.64a5.38,5.38,0,0,1-5.37,5.57h-6.2a5.52,5.52,0,0,0-5.58,5.37V288.17c0,24.79,18.59,44.62,41.11,44.62a37.8,37.8,0,0,0,21.07-6.4,5.11,5.11,0,0,0,2.27-4.34V291.31a5.56,5.56,0,0,1,5.58-5.58h16.32a5.56,5.56,0,0,1,5.58,5.58v42.1A5.91,5.91,0,0,1,387.47,337.13Z"
            />

            <path
              id="A2_End"
              d="M540.52,350.24q0,5.58-5.53,5.58h-16.2q-5.53,0-5.53-5.58V256.08q0-5.58-5.4-5.58H436.24q-5.4,0-5.4,5.58v94.16q0,5.58-5.53,5.58h-16.2q-5.53,0-5.53-5.58V157.7q0-29.32,20-49.78T472,87.47q28.5,0,48.54,20.45t20,49.78V350.24Zm-27.26-129.9v-62q0-18.8-12-32T472,113.09q-17,0-29.07,13.11a45,45,0,0,0-12,31.5v62.64q0,5.58,5.4,5.58h71.62Q513.26,225.92,513.26,220.34Z"
            />
            <path
              id="Y_End"
              d="M640.5,263.75a5.33,5.33,0,0,0-3.93,5.16v81.65a5.54,5.54,0,0,1-5.57,5.57H614.68a5.55,5.55,0,0,1-5.58-5.57V268.91a5.32,5.32,0,0,0-3.93-5.16c-29.33-8.06-50.81-35.74-50.81-68.58V96a5.55,5.55,0,0,1,5.57-5.58h16.32A5.56,5.56,0,0,1,581.83,96V195c0,25,18.39,45.24,40.9,45.24,22.73,0,41.11-20.25,41.11-45V96a5.56,5.56,0,0,1,5.58-5.58h16.32A5.55,5.55,0,0,1,691.31,96v99.13C691.31,228,669.62,255.69,640.5,263.75Z"
            />
          </g>
        </defs>
        <g id="startGroup" fill="url(#gradPattern)">
          <path
            id="P_Start"
            d="M202.81,188.38H135.05a5.38,5.38,0,0,0-5.37,5.58v27.88a5.56,5.56,0,0,1-5.58,5.58H107.78a5.55,5.55,0,0,1-5.57-5.58V96a5.55,5.55,0,0,1,5.57-5.58h95c22.72,0,41.11,18.18,41.11,40.49V148.1C243.92,170.41,225.53,188.38,202.81,188.38ZM216.65,131c0-8.67-6.2-15.7-13.84-15.7H135.05a5.33,5.33,0,0,0-5.37,5.37v37a5.38,5.38,0,0,0,5.37,5.58h67.76c7.64,0,13.84-7,13.84-15.7Z"
          />
          <path
            id="L_Start"
            d="M387.47,208.42a67.3,67.3,0,0,1-49.37,21.69c-37.8,0-68.37-31.81-68.37-71.06V120.62a5.52,5.52,0,0,0-5.58-5.37h-6.61a5.55,5.55,0,0,1-5.58-5.57V96a5.56,5.56,0,0,1,5.58-5.58h51.23A5.38,5.38,0,0,1,314.14,96v13.64a5.38,5.38,0,0,1-5.37,5.57h-6.2a5.52,5.52,0,0,0-5.58,5.37v38.84c0,24.79,18.59,44.62,41.11,44.62a37.8,37.8,0,0,0,21.07-6.4,5.11,5.11,0,0,0,2.27-4.34v-25a5.56,5.56,0,0,1,5.58-5.58h16.32a5.56,5.56,0,0,1,5.58,5.58V204.7A6,6,0,0,1,387.47,208.42Z"
          />
          <path
            id="Y_Start"
            d="M640.5,186.52a5.34,5.34,0,0,0-3.93,5.16v30.16a5.55,5.55,0,0,1-5.57,5.58H614.68a5.56,5.56,0,0,1-5.58-5.58V191.68a5.33,5.33,0,0,0-3.93-5.16c-29.33-8.06-50.81-35.74-50.81-68.58V96a5.55,5.55,0,0,1,5.57-5.58h16.32A5.56,5.56,0,0,1,581.83,96v21.69c0,25,18.39,45.24,40.9,45.24,22.73,0,41.11-20.24,41.11-45V96a5.56,5.56,0,0,1,5.58-5.58h16.32A5.55,5.55,0,0,1,691.31,96v21.9C691.31,150.78,669.62,178.46,640.5,186.52Z"
          />
          <path
            id="A2_Start"
            d="M540.52,221.53q0,5.58-5.53,5.58h-16.2q-5.53,0-5.53-5.58V204.59c0-3.72-1.8-5.57-5.4-5.57H436.24c-3.6,0-5.4,1.85-5.4,5.57v16.94q0,5.58-5.53,5.58h-16.2q-5.53,0-5.53-5.58V157.7q0-29.32,20-49.78T472,87.47q28.5,0,48.54,20.45t20,49.78v63.83Zm-27.26-52.67V158.32q0-18.8-12-32T472,113.09q-17,0-29.07,13.11a45,45,0,0,0-12,31.5v11.16q0,5.58,5.4,5.58h71.62Q513.26,174.44,513.26,168.86Z"
          />
          <path
            id="H_End"
            d="M233.38,512.43H217.06a5.56,5.56,0,0,1-5.58-5.58V412.68a5.51,5.51,0,0,0-5.37-5.57H134.84a5.38,5.38,0,0,0-5.37,5.57v94.17a5.55,5.55,0,0,1-5.57,5.58H107.58a5.56,5.56,0,0,1-5.58-5.58V252.33a5.55,5.55,0,0,1,5.58-5.57H123.9a5.55,5.55,0,0,1,5.57,5.57V377a5.38,5.38,0,0,0,5.37,5.57h71.27a5.51,5.51,0,0,0,5.37-5.57V252.33a5.55,5.55,0,0,1,5.58-5.57h16.32a5.55,5.55,0,0,1,5.58,5.57V506.85A5.56,5.56,0,0,1,233.38,512.43Z"
          />
          <path
            id="R_End"
            d="M542,512.43H525.66a5.56,5.56,0,0,1-5.58-5.58V406.64c0-8.68-6.2-15.7-13.63-15.7h-70a5.73,5.73,0,0,0-5.17,5.16V506.85a5.56,5.56,0,0,1-5.58,5.58H409.36a5.56,5.56,0,0,1-5.58-5.58V252.33a5.55,5.55,0,0,1,5.58-5.57h84.48c22.73,0,41.11,18.18,41.11,40.48v63a39,39,0,0,1-6.81,22.11,40.54,40.54,0,0,1,19.41,34.29V506.85A5.55,5.55,0,0,1,542,512.43Zm-34.5-225.19c0-8.67-6-15.69-13.64-15.69H431.25v89.23a5.21,5.21,0,0,0,5.37,5.37h57.22c7.65,0,13.64-7,13.64-15.7Z"
          />
          <path
            id="A_End"
            d="M389.84,506.54q0,5.56-5.53,5.57h-16.2q-5.53,0-5.53-5.57V379.11q0-5.57-5.4-5.57H285.55c-3.6,0-5.39,1.86-5.39,5.57V506.54q0,5.56-5.54,5.57H258.43q-5.53,0-5.54-5.57V314q0-29.34,20-49.78t48.33-20.45q28.51,0,48.55,20.45t20,49.78V506.54ZM362.58,343.38V314.62q0-18.8-12.05-32t-29.27-13.22q-17,0-29.06,13.12t-12,31.5v29.38c0,3.72,1.79,5.58,5.39,5.58h71.63Q362.58,349,362.58,343.38Z"
          />

          <path
            id="D_End"
            d="M702,444.15q0,28.31-19.93,48.34t-48.44,20H565q-5.57,0-5.57-5.58V252.44c0-3.71,1.86-5.58,5.57-5.58h68.66q28.3,0,48.33,20.14t20,48.34Zm-27.26-.1V315.21a43.6,43.6,0,0,0-12.12-30.93q-12.12-12.84-29.1-12.83H592c-3.58,0-5.38,1.79-5.38,5.38V482.35c0,3.73,1.8,5.59,5.38,5.59h41.48q17,0,29.1-12.83T674.74,444.05Z"
          />
        </g>
      </svg>
    </div>
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  components: {
    HelloWorld
  }
};
</script>
